<template>
  <div>
    <!-- 搜索 -->
    <van-search show-action placeholder="请输入搜索关键词" />
    <div class="bycbigbox">
      <!-- 左侧列表 -->
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          v-for="item in lists"
          :key="item.id"
          :title="item.name"
          style="color: black"
        ></van-sidebar-item>
      </van-sidebar>
      <!-- 右侧 -->
      <div class="section-item">
        <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item></van-swipe-item>
        </van-swipe> -->
        <div class="fl-item">
          <div
            class="fl-item-s"
            v-for="(item, index) in subCategory"
            :key="index"
          >
            <van-image :src="item.icon"></van-image>
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: [],
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      keyword: "",
      url: "",
      activeKey: 0,
      lists: [{ name: "所有商品", pid: 0 }], //顶级分类
      allCates: [], //二级分类
    };
  },
  // 计算属性
  computed: {
    subCategory() {
      let arr = this.allCates;
      //判断当前点击的是不是所有分类 是所有分类就把数据return出去
      if (this.activeKey == 0) {
        return arr;
      } else {
        //点击其他分类
        let pid = this.lists[this.activeKey].id;
        return arr.filter((item) => {
          return item.pid == pid;
        });
      }
    },
  },
  // 侦听器
  watch: {},
  // 组件方法
  methods: {},
  //生命周期
  created() {},
  mounted() {
    this.url = this.$store.state.appurl;
    this.$axios.post(`${this.url}/shop/goods/category/all`).then((res) => {
      let tmp_arr = res.data.filter((item) => {
        return item.pid == 0;
      });

      this.lists.push(...tmp_arr);
      this.allCates = res.data;
    });
  },
};
</script> 

<style scoped lang="scss">
.bycbigbox {
  width: 100%;
  flex-wrap: nowrap;
  display: flex;
  .van-sidebar {
    height: 550px;
  }
  .section-item {
    flex: 1;
    .my-swipe {
      width: 100%;
    }
    .fl-item {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .fl-item-s {
        width: 31%;
        margin: 1%;
        box-sizing: border-box;
        border-radius: 20%;
        padding: 5px;
        img {
          width: 100%;
        }
        p {
          font-size: 12px;
          text-align: center;
          color: coral;
        }
      }
    }
  }
}
</style>
